<template>
  <el-form ref="formRef" :model="form" label-width="70px">
    <el-form-item label="标题" prop="title" required>
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item label="内容" prop="content" required>
      <el-input
        v-model="form.content"
        :rows="2"
        type="textarea"
        placeholder="Please input"
      />
    </el-form-item>
    <el-form-item label="接收者" prop="receiveUserId" required>
      <el-input v-model="form.receiveUserId" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">发送消息</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item></el-form
  >
</template>

<script setup>
import { ref } from 'vue'
import { addmessage } from '@/api/message'
import { ElMessage } from 'element-plus'
const form = ref({
  title: '',
  content: '',
  receiveUserId: null
}) // 消息接口 消息form表没对上
const submitForm = () => {
  // 提交接口
  addmessage(form.value)
  ElMessage({
    showClose: true,
    message: '消息成功发送',
    type: 'success'
  })
  resetForm()
}
const resetForm = () => {
  form.value = {
    title: '',
    content: '',
    receiveUserId: null
  }
}
</script>

<style lang="scss" scoped></style>
